<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<style>
		#cas{
			display: block;
			border:1px solid;
			margin:auto;
		}
	</style>
	<script>
		window.onload = function(){
			var canvas = document.getElementById('cas');
			var context = canvas.getContext('2d');
			var RADIUS = 100;
			drawClock(); 
			setInterval(function(){
				context.clearRect(0,0,canvas.width,canvas.height);
				drawClock(); 
			},1000)

			function drawCircle(){
				context.beginPath();
				context.arc(canvas.width/2,canvas.width/2,RADIUS , 0 , 2*Math.PI);
				context.stroke();
				context.save();
				context.beginPath();
				context.arc(canvas.width/2,canvas.width/2, 5 , 0 , 2*Math.PI);
				context.fill();
			}
			function drawtext(){
				var num = [3,4,5,6,7,8,9,10,11,12,1,2];
				for(var i=0;i<num.length;i++){
					context.font = "18px 微软雅黑";
					context.textAlign = "center";
					context.textBaseline = "middle";
					var textangle = i < 6 ? (i * Math.PI/6): -(12-i)* Math.PI/6;
					context.fillText(num[i] , canvas.width/2 + (RADIUS-15) * Math.cos(textangle), canvas.width/2 + (RADIUS-15) * Math.sin(textangle));
				}
			}
			function drawPointer(){
				var date = new Date();
				var h = (date.getHours()+1) > 12 ? date.getHours()-12 : date.getHours();
				var m = date.getMinutes();
				var s = date.getSeconds();
				var h_angle = -getangle(Math.PI * h/6 + Math.PI/6*m/60);
				var m_angle = -getangle(Math.PI * m/30 + Math.PI/30*s/60);
				// console.log(s/60 * Math.PI*2 * 180/Math.PI)
				var s_angle = -getangle(s/30 * Math.PI);
				// console.log(Math.PI * h/6 + " and " + Math.PI/30*m/60)
				// console.log((Math.PI * m/30 + Math.PI/6*s/60)*180/Math.PI)
				// console.log(h_angle*180/Math.PI)
				// console.log(m_angle*180/Math.PI)
				// console.log(s_angle*180/Math.PI)
				drawLine(canvas.width/2,canvas.width/2,canvas.width/2 + (RADIUS*0.5)* Math.cos(h_angle) , canvas.width/2 + (RADIUS*0.6)* Math.sin(h_angle));
				drawLine(canvas.width/2,canvas.width/2,canvas.width/2 + (RADIUS*0.7)* Math.cos(m_angle) , canvas.width/2 + (RADIUS*0.8)* Math.sin(m_angle));
				drawLine(canvas.width/2,canvas.width/2,canvas.width/2 + (RADIUS*0.9)* Math.cos(s_angle) , canvas.width/2 + (RADIUS*0.8)* Math.sin(s_angle));
			}
			function getangle(angle){
				if(angle <= 1.5*Math.PI){
					return (0.5*Math.PI-angle)
				}
				else {
					return (2.5*Math.PI - angle)
				}
			}
			function drawLine(initx,inity,endx,endy){
				context.moveTo(initx , inity);
				context.lineTo(endx , endy);
				context.stroke();
			}
			function drawClock(){
				drawCircle();
				drawtext();
				drawPointer();
			}
		}
	</script>
	<title>Canvas时钟</title>
</head>
<body>
	<div >
		<canvas id='cas' width="500" height="500">浏览器不支持canvas</canvas>
	</div>
</body>
</html>